<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="./component/pear/css/pear.css" />
	<link rel="stylesheet" href="./admin/css/other/login.css" />
	<link rel="stylesheet" href="./admin/css/variables.css" />
	<script>if (window.self != window.top) { top.location.reload();}</script>
</head>

<body>
	<div class="login-page" style="background-image: url(./admin/images/background.svg)">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="./admin/images/banner0.png" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								
								<span>简易成绩管理系统</span>
							</div>
							<div class="top-desc">
								    - - - - - - - -重庆工商大学- - - - - - - -
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input lay-verify="required" placeholder="账户" autocomplete="off"
											class="layui-input" id="no">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input type="password" name="confirmPassword" value=""
											lay-verify="required|confirmPassword" placeholder="密码" autocomplete="off"
											class="layui-input" lay-affix="eye" id="password">
									</div>
								</div>
<!--								<div class="tab-log-verification">-->
<!--									<div class="verification-text">-->
<!--										<div class="layui-input-wrap">-->
<!--											<div class="layui-input-prefix">-->
<!--												<i class="layui-icon layui-icon-auz"></i>-->
<!--											</div>-->
<!--											<input lay-verify="required" value="VBJFQ" placeholder="验证码" autocomplete="off"-->
<!--												class="layui-input">-->
<!--										</div>-->
<!--									</div>-->
<!--									<img src="./admin/images/captcha.gif" alt=""-->
<!--										class="verification-img" />-->
<!--								</div>-->
<!--								<div class="layui-form-item">-->
<!--									<div class="remember-passsword">-->
<!--										<div class="remember-cehcked">-->
<!--											<input type="checkbox" name="like1[write]" lay-skin="primary" title="自动登录">-->
<!--										</div>-->
<!--									</div>-->
<!--								</div>-->

<!--								<div class="input-group mb-5 d-flex justify-content-between">-->
<!--									<label class="radio-inline">-->
<!--										<input type="radio" name="inlineRadio0ptions" id="inlineRadio1" value="student" checked>-->
<!--										学生登录-->
<!--									</label>-->
<!--									<label class="radio-inline">-->
<!--										<input type="radio" name="inlineRadio0ptions" id="inlineRadio2" value="teacher" checked>-->
<!--										教师登录-->
<!--									</label>-->
<!--									<label class="radio-inline">-->
<!--										<input type="radio" name="inlineRadio0ptions" id="inlineRadio3" value="admin">-->
<!--										管理员登录-->
<!--									</label>-->
<!--									<div class="form-check"></div>-->
<!--								</div>-->

<!--								<div class="layui-form">-->
<!--									<input type="radio" name="AAA" id="inlineRadio1" value="1" title="学生登录" checked>-->
<!--									<input type="radio" name="AAA" id="inlineRadio2" value="2" title="教师登录" checked>-->
<!--									<input type="radio" name="AAA" id="inlineRadio3" value="3" title="管理员登录" checked>-->
<!--								</div>-->
<!--								<br>-->

								<div class="layui-form">
									<input type="radio" name="roleType" value="1" title="学生登录" checked>
									<input type="radio" name="roleType" value="2" title="教师登录">
									<input type="radio" name="roleType" value="3" title="管理员登录">
								</div>


								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login">登 录</button>
								</div>
<!--								<div class="other-login">-->
<!--									<div class="other-login-methods">-->
<!--										其他方式-->
<!--									</div>-->
<!--									<div class="blueText">注册账号</div>-->
<!--								</div>-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="./component/layui/layui.js"></script>
	<script src="./component/pear/pear.js"></script>


<!--	<script>-->
<!--		layui.use(['form', 'button', 'popup', 'toast'], function() {-->
<!--			var toast = layui.toast;-->
<!--			var form = layui.form;-->
<!--			var button = layui.button;-->
<!--			var popup = layui.popup;-->
<!--			const $ = layui.$;-->

<!--			// 登录提交-->
<!--			form.on('submit(login)', function(data) {-->
<!--				let no = $("#no").val();-->
<!--				let password = $("#password").val();-->
<!--				let roleType = $("input[name='roleType']:checked").val();-->

<!--				// 显示加载中-->
<!--				button.load({-->
<!--					elem: '.login',-->
<!--					time: 1500-->
<!--				});-->

<!--				// 根据角色类型选择不同的验证接口-->
<!--				let apiUrl = "";-->
<!--				switch(roleType) {-->
<!--					case "1": // 学生-->
<!--						apiUrl = "api/student/validateUser";-->
<!--						break;-->
<!--					case "2": // 教师-->
<!--						apiUrl = "api/teacher/validateUser";-->
<!--						break;-->
<!--					case "3": // 管理员-->
<!--						apiUrl = "api/admin/validateUser";-->
<!--						break;-->
<!--				}-->

<!--				$.ajax({-->
<!--					url: apiUrl,-->
<!--					data: {-->
<!--						no: no,-->
<!--						password: password-->
<!--					}-->
<!--				}).done(result => {-->
<!--					console.log(result);-->

<!--					if(result.code == 0) {-->
<!--						// 根据角色类型跳转到不同页面-->
<!--						switch(roleType) {-->
<!--							case "1": // 学生-->
<!--								location.href = "/index";-->
<!--								break;-->
<!--							case "2": // 教师-->
<!--								location.href = "/index";-->
<!--								break;-->
<!--							case "3": // 管理员-->
<!--								location.href = "/index";-->
<!--								break;-->
<!--						}-->
<!--					} else {-->
<!--						toast.error({-->
<!--							message: result.msg || "登录失败",-->
<!--						});-->
<!--					}-->
<!--				}).fail(function() {-->
<!--					toast.error({-->
<!--						message: "请求失败，请检查网络",-->
<!--					});-->
<!--				});-->

<!--				return false;-->
<!--			});-->
<!--		});-->
<!--	</script>-->

	<script>
		layui.use(['form', 'button', 'popup', 'toast'], function() {
			var toast = layui.toast;
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
			const $ = layui.$;

			// 登录提交
			form.on('submit(login)', function(data) {
				let no = $("#no").val();
				let password = $("#password").val();
				let roleType = $("input[name='roleType']:checked").val();

				// 显示加载中
				button.load({
					elem: '.login',
					time: 1500
				});

				// 根据角色类型选择不同的验证接口
				let apiUrl = "";
				const roleMap = { "1": "student", "2": "teacher", "3": "admin" }; // 角色映射表
				let roleName = roleMap[roleType]; // 获取英文角色名

				switch(roleType) {
					case "1": // 学生
						apiUrl = "api/student/validateUser";
						break;
					case "2": // 教师
						apiUrl = "api/teacher/validateUser";
						break;
					case "3": // 管理员
						apiUrl = "api/admin/validateUser";
						break;
				}

				$.ajax({
					url: apiUrl,
					data: {
						no: no,
						password: password
					}
				}).done(result => {
					console.log(result);

					if(result.code == 0) {
						// ✅ 关键修改：存储角色和用户信息到localStorage
						try {
							localStorage.setItem('role', roleName); // 存储英文角色标识
							localStorage.setItem('userNo', no); // 存储用户账号
							localStorage.setItem('lastLogin', new Date().toISOString()); // 存储登录时间

							// 如果后端返回了更多用户信息，也可以存储
							if(result.data && result.data.user) {
								localStorage.setItem('userInfo', JSON.stringify(result.data.user));
							}
						} catch(e) {
							console.error("localStorage存储失败:", e);
							// 降级方案：尝试使用sessionStorage
							sessionStorage.setItem('role', roleName);
						}

						// 根据角色类型跳转到不同页面
						switch(roleType) {
							case "1": // 学生
								location.href = "/index";
								break;
							case "2": // 教师
								location.href = "/index";
								break;
							case "3": // 管理员
								location.href = "/index";
								break;
						}
					} else {
						toast.error({
							message: result.msg || "登录失败",
						});
					}
				}).fail(function() {
					toast.error({
						message: "请求失败，请检查网络",
					});
				});

				return false;
			});
		});
	</script>









<!--	<script>-->
<!--		layui.use(['form', 'button', 'popup','toast'], function () {-->
<!--			var toast=layui.toast;-->
<!--			var form = layui.form;-->
<!--			var button = layui.button;-->
<!--			var popup = layui.popup;-->
<!--			const $=layui.$-->

<!--			// 登 录 提 交-->
<!--			form.on('submit(login)', function (data) {-->
<!--				let no=$("#no").val();-->
<!--				let password=$("#password").val();-->


<!--				/// 验证-->
<!--				$.ajax({-->
<!--					url:"api/student/validateUser",-->
<!--					data:{-->
<!--						no:no,-->
<!--						password:password-->
<!--					}-->

<!--				}).done(result=>{-->

<!--					console.log(result)-->

<!--					if(result.code==0){-->
<!--						location.href="/index";-->

<!--					}else {-->
<!--						toast.error({-->
<!--							message:result.msg,-->
<!--						});-->
<!--					}-->

<!--				})-->
<!--				-->


<!--				/// 登录-->

<!--				/// 动画-->
<!--				// button.load({-->
<!--				// 	elem: '.login',-->
<!--				// 	time: 1500,-->
<!--				// 	done: function () {-->
<!--				// 		popup.success("登录成功", function () {-->
<!--				// 			location.href = "./index.html"-->
<!--				// 		});-->
<!--				// 	}-->
<!--				// })-->
<!--				//-->
<!--				// return false;-->
<!--			});-->
<!--		})-->
<!--	</script>-->



<!--&lt;!&ndash;此时也不行用不同身份登录&ndash;&gt;-->
<!--	<script>-->
<!--		form.on('submit(login)', function (data) {-->
<!--			let no = $("#no").val();-->
<!--			let password = $("#password").val();-->
<!--			let roleType = $("input[name='AAA']:checked").val(); // 获取选择的角色(1,2,3)-->

<!--			button.load({-->
<!--				elem: '.login',-->
<!--				time: 1500,-->
<!--				done: function () {-->
<!--					$.ajax({-->
<!--						url: "/api/auth/login",-->
<!--						type: "POST",-->
<!--						data: {-->
<!--							no: no,-->
<!--							password: password,-->
<!--							roleType: roleType-->
<!--						},-->
<!--						success: function(res) {-->
<!--							if(res.code == 0) {-->
<!--								// 存储用户信息和角色-->
<!--								localStorage.setItem('user', JSON.stringify(res.data.user));-->
<!--								localStorage.setItem('role', res.data.role);-->

<!--								popup.success("登录成功", function() {-->
<!--									location.href = "/index.html";-->
<!--								});-->
<!--							} else {-->
<!--								toast.error({message: res.msg});-->
<!--							}-->
<!--						}-->
<!--					});-->
<!--				}-->
<!--			});-->
<!--			return false;-->
<!--		});-->
<!--	</script>-->


<!--	<script>-->
<!--		layui.use(['form', 'jquery', 'layer'], function(){-->
<!--			var form = layui.form;-->
<!--			var $ = layui.jquery;-->
<!--			var layer = layui.layer;-->

<!--			form.on('submit(login)', function(data){-->
<!--				var no = $("#no").val();-->
<!--				var password = $("#password").val();-->
<!--				var roleType = $("input[name='roleType']:checked").val();-->

<!--				// AJAX 请求示例-->
<!--				$.ajax({-->
<!--					url: '/api/login',-->
<!--					type: 'POST',-->
<!--					data: {-->
<!--						no: no,-->
<!--						password: password,-->
<!--						roleType: roleType-->
<!--					},-->
<!--					success: function(res) {-->
<!--						if(res.code === 0) {-->
<!--							location.href = res.redirectUrl;-->
<!--						} else {-->
<!--							layer.msg(res.msg);-->
<!--						}-->
<!--					}-->
<!--				});-->
<!--				return false;-->
<!--			});-->
<!--		});-->
<!--	</script>-->


<!--	这是里deep seek第一次生成，有误-->
<!--	<script>-->
<!--		form.on('submit(login)', function (data) {-->
<!--			let no = $("#no").val();-->
<!--			let password = $("#password").val();-->
<!--			let userType = $('input[name="userType"]:checked').val(); // 获取选中的用户类型-->

<!--			$.ajax({-->
<!--				url: "/api/student/validateUser",-->
<!--				method: "POST",-->
<!--				data: {-->
<!--					no: no,-->
<!--					password: password,-->
<!--					userType: userType // 发送用户类型-->
<!--				},-->
<!--				success: function(result) {-->
<!--					if(result.code == 0){-->
<!--						// 根据用户类型重定向到不同的页面-->
<!--						if(userType == 1){-->
<!--							location.href="/student/index";-->
<!--						}else if(userType == 2){-->
<!--							location.href="/teacher/index";-->
<!--						}else if(userType == 3){-->
<!--							location.href="/admin/index";-->
<!--						}-->
<!--					}else {-->
<!--						toast.error({-->
<!--							message:result.msg,-->
<!--						});-->
<!--					}-->
<!--				}-->
<!--			});-->
<!--			return false;-->
<!--		});-->
<!--	</script>-->


<!--下面是参考网上同学-->
<!--	<script>-->
<!--		// 登录-->
<!--		function login() {-->
<!--			var no = $("#no").val();-->
<!--			var password = $("#password").val();-->
<!--			var option = null;-->
<!--			var obj = document.getElementsByName("inlineRadioOptions")-->
<!--			//遍历Radio-->
<!--			for (var i = 0; i < obj.length; i++) {-->
<!--				if (obj[i].checked) {-->
<!--					option = obj[i].value;-->
<!--				}-->
<!--			}-->

<!--			$.ajax({-->
<!--				url: "/webapi/login/" + option,-->
<!--				data: {-->
<!--					no: no,-->
<!--					password: password-->
<!--				}-->
<!--			}).done(function (rs) {-->
<!--				if (rs >= 0) {-->
<!--					window.location.href = "/" + option + "/main";-->
<!--				} else {-->
<!--					alert(option + "编号或密码不正确，请重新输入！");-->
<!--				}-->
<!--			});-->
<!--		}-->
<!--	</script>-->
</body>

</html>
